<template>
    <div class="Management">
        <!-- 卡片 -->
        <el-card>
            <h2>题库管理(当前共{{total}}题)</h2>
            <!-- 搜索栏 -->
            <el-form :model="search" ref="searchFormRef" class="form-container">
                <el-row type="flex" justify="center" class="form-row">
                    <el-col :span="8" class="form-col">
                        <div class="form-item">
                            <span>题<span class="placeholder"></span><span class="placeholder"></span>目</span>
                            <el-input v-model="search.title" placeholder="请输入题目" prop="title" style="width: 200px;"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="8" class="form-col">
                        <div class="form-item">
                            <span>题目类型</span>
                            <el-select v-model="search.type" prop="type" placeholder="请选择题目类型" style="width: 200px;">
                                <el-option label="选题题" value="选题题"></el-option>
                                <el-option label="判断题" value="判断题"></el-option>
                                <el-option label="简答题" value="简答题"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="8" class="form-col">
                        <div class="form-item">
                            <span>难<span class="placeholder"></span><span class="placeholder"></span>度</span>
                            <el-select v-model="search.difficulty" prop="difficulty" placeholder="请选择难度" style="width: 200px;">
                                <el-option label="简单" value="简单"></el-option>
                                <el-option label="中等" value="中等"></el-option>
                                <el-option label="易错" value="易错"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" class="form-row">
                    <el-col :span="8" class="form-col">
                        <div class="form-item">
                            <span>课<span class="placeholder"></span><span class="placeholder"></span>程</span>
                            <el-select v-model="search.course" prop="course" placeholder="请选择课程" @click="handlCourse" style="width: 200px;">
                                <el-option v-for="item in courses" :key="item" :label="item" :value="item" />
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="8" class="form-col">
                        <div class="form-item">
                            <span>发布状态</span>
                            <el-select v-model="search.publish" prop="publish" placeholder="请选择发布状态" style="width: 200px;">
                                <el-option label="已发布" value="已发布"></el-option>
                                <el-option label="未发布" value="未发布"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="8" class="form-col">
                        <div class="form-item">
                            <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                            <el-button :icon="Refresh" @click="handleReset">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
             <!-- 表格头部操作按钮 -->
            <div style="margin-bottom: 10px;display: flex;justify-content: flex-end;padding-right: 3px;">
                <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
                <el-button type="danger" :icon="DeleteFilled"@click=handleDeletes>批量删除</el-button>
            </div>
            <!-- 表格 -->
            <el-tabs v-model="activeTab" type="border-card">
                <el-tab-pane label="审核通过" name="auditStatusPass">
                    <el-table  v-if="auditStatusPass.length > 0" :data="auditStatusPass" stripe :fit="true" style="width: 100%;" max-height="400"  
                        :default-sort="{ prop: 'index', order: 'descending' }" 
                        :header-cell-style="{ 'fontWeight': 'bold','font-size':'16px','text-align':'center','background':'#eef1f6',color:'#606266' }"
                        :cell-style="{'text-align':'center'}">
                        <el-table-column type="selection" width="40" ></el-table-column>
                        <el-table-column type="index" label="编号" width="60"  fixed  sortable></el-table-column>
                        <el-table-column prop="title" label="题目" :min-width="200">
                            <template #default="scope">
                                    <el-popover
                                        :title="scope.row.title"
                                        placement="top"
                                        trigger="hover"
                                        width="360"
                                        :content="scope.row.questionStem && scope.row.question ? `${scope.row.questionStem}${scope.row.question}` : '无内容'"
                                        >
                                        <template #reference>
                                            <span>
                                                {{ scope.row.title }}
                                            </span>
                                        </template>
                                        <div>
                                            <b>题干：</b>{{ scope.row.questionStem }}<br/>
                                            <b>问题：</b>{{ scope.row.question }}
                                        </div>
                                    </el-popover> 
                            </template>
                        </el-table-column>
                        <el-table-column prop="course" label="课程" width="200"></el-table-column>
                        <el-table-column prop="knowledgePoint" label="知识点" width="300">
                            <template #default="scope">
                                <el-tag type="primary" v-for="(item,index) in scope.row.knowledgePoint" :key="index" style="font-size: 14px;">
                                    {{item}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="chapter" label="章节" width="200"></el-table-column>
                        <el-table-column prop="type" label="题目类型" width="200"></el-table-column>
                        <el-table-column prop="answer" label="正确答案" :width="200">
                            <template #default="scope">
                                <el-popover
                                    v-if="scope.row.answer && scope.row.answer.length > 11"
                                    placement="top"
                                    trigger="hover"
                                    width="360"
                                    :content="scope.row.answer"
                                    >
                                    <template #reference>
                                        <span class="text-ellipsis">
                                            {{ scope.row.answer }}
                                        </span>
                                    </template>
                                    <div>
                                        <b>解析:{{ scope.row.answer }}</b>
                                    </div>
                                </el-popover>
                                <span v-else>
                                    {{ scope.row.answer }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="difficulty" label="难度" width="200">
                            <template #default="scope">
                                <el-tag :type="getTagType(scope.row.difficulty)">
                                    {{ scope.row. difficulty}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="publish" label="发布状态" width="200">
                            <template #default="{ row }">
                                <el-tag v-if="row.publish==='true'" type="success"> 发布 </el-tag>
                                <el-tag v-else type="danger">未发布</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="350">
                            <template #default="scope">
                                <el-button type="primary" :icon="Edit" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="danger" :icon="DeleteFilled" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-empty v-else :image-size="280" description="暂无数据"/>
                </el-tab-pane>
                <el-tab-pane label="待审核" name="auditStatusReviewed">
                    <el-table  v-if="auditStatusReviewed.length > 0" :data="auditStatusReviewed" stripe :fit="true" style="width: 100%;" max-height="400"  :default-sort="{ prop: 'index', order: 'descending' }" :header-cell-style="{ 'fontWeight': 'bold','font-size':'16px','text-align':'center','background':'#eef1f6',color:'#606266' }":cell-style="{'text-align':'center'}">
                        <el-table-column type="selection" width="40" ></el-table-column>
                        <el-table-column type="index" label="编号" width="60"  fixed  sortable></el-table-column>
                        <el-table-column prop="title" label="题目" :min-width="200">
                            <template #default="scope">
                                    <el-popover
                                        :title="scope.row.title"
                                        placement="top"
                                        trigger="hover"
                                        width="360"
                                        :content="scope.row.questionStem && scope.row.question ? `${scope.row.questionStem}${scope.row.question}` : '无内容'"
                                        >
                                        <template #reference>
                                            <span>
                                                {{ scope.row.title }}
                                            </span>
                                        </template>
                                        <div>
                                            <b>题干：</b>{{ scope.row.questionStem }}<br />
                                            <b>问题：</b>{{ scope.row.question }}
                                        </div>
                                    </el-popover> 
                            </template>
                        </el-table-column>
                        <el-table-column prop="course" label="课程" width="200"></el-table-column>
                        <el-table-column prop="knowledgePoint" label="知识点" width="300">
                            <template #default="scope">
                                <el-tag type="primary" v-for="(item,index) in scope.row.knowledgePoint" :key="index" style="font-size: 14px;">
                                    {{item}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="chapter" label="章节" width="200"></el-table-column>
                        <el-table-column prop="type" label="题目类型" width="200"></el-table-column>
                        <el-table-column prop="answer" label="正确答案" :width="200">
                            <template #default="scope">
                                <el-popover
                                    v-if="scope.row.answer && scope.row.answer.length > 11"
                                    placement="top"
                                    trigger="hover"
                                    width="360"
                                    :content="scope.row.answer"
                                    >
                                    <template #reference>
                                        <span class="text-ellipsis">
                                            {{ scope.row.answer }}
                                        </span>
                                    </template>
                                    <div>
                                        <b>解析:{{ scope.row.answer }}</b>
                                    </div>
                                </el-popover>
                                <span v-else>
                                    {{ scope.row.answer }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="difficulty" label="难度" width="200">
                            <template #default="scope">
                                <el-tag :type="getTagType(scope.row.difficulty)">
                                    {{ scope.row. difficulty}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="publish" label="发布状态" width="200">
                            <template #default="{ row }">
                                <el-tag v-if="row.publish==='true'" type="success"> 发布 </el-tag>
                                <el-tag v-else type="danger">未发布</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="350">
                            <template #default="scope">
                                <el-button type="warning" :icon="SetUp" size="mini" @click="handleAudit(scope.$index, scope.row)">审核</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-empty v-else :image-size="280" description="暂无数据"/>
                </el-tab-pane>
                <el-tab-pane label="审核驳回" name="auditStatusUnpass">
                    <el-table  v-if="auditStatusUnpass.length > 0" :data="auditStatusUnpass" stripe :fit="true" style="width: 100%;" max-height="400"  :default-sort="{ prop: 'index', order: 'descending' }" :header-cell-style="{ 'fontWeight': 'bold','font-size':'16px','text-align':'center','background':'#eef1f6',color:'#606266' }":cell-style="{'text-align':'center'}">
                        <el-table-column type="selection" width="40" ></el-table-column>
                        <el-table-column type="index" label="编号" width="60"  fixed  sortable></el-table-column>
                        <el-table-column prop="title" label="题目" :min-width="200">
                            <template #default="scope">
                                    <el-popover
                                        :title="scope.row.title"
                                        placement="top"
                                        trigger="hover"
                                        width="360"
                                        :content="scope.row.questionStem && scope.row.question ? `${scope.row.questionStem}${scope.row.question}` : '无内容'"
                                        >
                                        <template #reference>
                                            <span>
                                                {{ scope.row.title }}
                                            </span>
                                        </template>
                                        <div>
                                            <b>题干：</b>{{ scope.row.questionStem }}<br />
                                            <b>问题：</b>{{ scope.row.question }}
                                        </div>
                                    </el-popover> 
                            </template>
                        </el-table-column>
                        <el-table-column prop="course" label="课程" width="200"></el-table-column>
                        <el-table-column prop="knowledgePoint" label="知识点" width="300">
                            <template #default="scope">
                                <el-tag type="primary" v-for="(item,index) in scope.row.knowledgePoint" :key="index" style="font-size: 14px;">
                                    {{item}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="chapter" label="章节" width="200"></el-table-column>
                        <el-table-column prop="type" label="题目类型" width="200"></el-table-column>
                        <el-table-column prop="answer" label="正确答案" :width="200">
                            <template #default="scope">
                                <el-popover
                                    v-if="scope.row.answer && scope.row.answer.length > 11"
                                    placement="top"
                                    trigger="hover"
                                    width="360"
                                    :content="scope.row.answer"
                                    >
                                    <template #reference>
                                        <span class="text-ellipsis">
                                            {{ scope.row.answer }}
                                        </span>
                                    </template>
                                    <div>
                                        <b>解析:{{ scope.row.answer }}</b>
                                    </div>
                                </el-popover>
                                <span v-else>
                                    {{ scope.row.answer }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="difficulty" label="难度" width="200">
                            <template #default="scope">
                                <el-tag :type="getTagType(scope.row.difficulty)">
                                    {{ scope.row. difficulty}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="publish" label="发布状态" width="200">
                            <template #default="{ row }">
                                <el-tag v-if="row.publish==='true'" type="success"> 发布 </el-tag>
                                <el-tag v-else type="danger">未发布</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="350">
                            <template #default="scope">
                                <el-button type="warning" :icon="SetUp" size="mini" @click="handleAudit(scope.$index, scope.row)">审核</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-empty v-else :image-size="280" description="暂无数据"/>
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <!-- 分页 -->
        <div class="pagination-container">
                <Pagination ref="questionBanManagementPagination"
                style="margin-top: 20px; display: flex; justify-content: center;"
                v-model:currentPage="currentPage"
                v-model:pageSize="pageSize" 
                v-model:total="total"
                @updateData="(courrentPage, pageSize)=>{ console.log('更新数据\n当前页码：' + courrentPage, '每页条数：' + pageSize) }"
            />
            </div>
        <!-- 对话框 -->
        <el-dialog v-model="dialogVisible" :title="selectTitle" width="900" :before-close="handleClose">
            <el-form ref="ruleFormRef"  :model="ruleForm" :rules="rules" label-width="100px">
                <!-- 用 el-row 包裹 el-col，设置列间距 -->
                <el-row gutter={20}> 
                    <!-- 左边的输入框 -->
                    <el-col :span="11"> 
                        <el-form-item label="题目" prop="title">
                            <el-input v-model="ruleForm.title"  placeholder="请输入题目"/>
                        </el-form-item>
                    </el-col>
                    <!-- 右边的输入框 -->
                    <el-col :span="11"> 
                        <el-form-item label="课程" prop="course">
                            <el-input v-model="ruleForm.course" placeholder="请输入课程"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 新的一行，分成左右两个输入框 -->
                <el-row gutter={20}> 
                    <el-col :span="11">
                        <el-form-item label="知识点" prop="knowledgePoint">
                            <el-input v-model="ruleForm.knowledgePoint"  placeholder="请输入知识点"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="章节" prop="chapter">
                            <el-input v-model="ruleForm.chapter" placeholder="请输入章节"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 另一行，用 el-row 继续分配输入框 -->
                <el-row gutter={20}> 
                    <el-col :span="11">
                        <el-form-item label="正确答案" prop="answer">
                           <el-select v-model="ruleForm.answer" placeholder="请选择正确答案">
                               <el-option label="A" value="A"></el-option>
                               <el-option label="B" value="B"></el-option>
                               <el-option label="C" value="C"></el-option>
                               <el-option label="D" value="D"></el-option>
                          </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="难度" prop="difficulty">
                            <el-select v-model="ruleForm.difficulty" placeholder="请选择难度">
                                <el-option label="简单" value="简单"></el-option>
                                <el-option label="中等" value="中等"></el-option>
                                <el-option label="困难" value="易错"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter={20}> 
                    <el-col :span="11">
                        <el-form-item label="题目类型" prop="type">
                           <el-select v-model="ruleForm.type" placeholder="请选择题目类型">
                                <el-option label="单选题" value="单选题"></el-option>
                                <el-option label="多选题" value="多选题"></el-option>
                                <el-option label="判断题" value="判断题"></el-option>
                          </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="审核状态" prop="auditStatus">
                            <el-select v-model="ruleForm.auditStatus" placeholder="请选择审核状态">
                                <el-option label="未提交" value="未提交"></el-option>
                                <el-option label="待审核" value="待审核"></el-option>
                                <el-option label="审核通过" value="审核通过"></el-option>
                                <el-option label="审核未通过" value="审核未通过"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter={20}> 
                    <el-col :span="11">
                        <el-form-item label="发布" prop="publish">
                            <el-switch
                                v-model="ruleForm.publish"
                                class="ml-2"
                                inline-prompt
                                
                                active-text="发布"
                                inactive-text="未发布"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="创建时间" prop="createTime">
                            <el-date-picker
                                v-model="ruleForm.createTime"
                                type="date"
                                placeholder="选择创建日期"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="button-group">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="QuestionBankManagement">
    import { ref,onMounted, reactive, nextTick, watch ,computed} from 'vue'
    import { ElMessageBox, FormInstance, FormRules } from 'element-plus'
    import Pagination from '@/components/Pagination.vue';
// 数据源
    // 图标
    import {
    Plus,
    Refresh,
    Edit,
    DeleteFilled,
    Search,
    SetUp
    } from '@element-plus/icons-vue'
    // 搜索框
    const search = reactive({title: '',type: '' , difficulty: '' , course : [], publish: ''})
    // 课程数据
    const courses = ref(['数据库','计算机网络','数据结构','java','c++','java高级编程','javaEE','计算机组成原理','操作系统','操作系统原理','计算机网络原理','数据库原理','数据库系统原理',])
    // 当前活动的标签页
    const activeTab = ref<string>("auditStatusPass");
    // auditStatusPass 传值的数据类型
    interface auditStatusPass {
        id: string;
        title: string;
        questionStem: string;
        question: string;
        course: string;
        knowledgePoint: string[];
        chapter: string;
        answer: string;
        difficulty: string;
        type: string;
        createTime: string;
        auditStatus: string;
        publish: string;
    }
    interface auditStatusReviewed {
        id: string;
        title: string;
        questionStem: string;
        question: string;
        course: string;
        knowledgePoint: string[];
        chapter: string;
        answer: string;
        difficulty: string;
        type: string;
        createTime: string;
        auditStatus: string;
        publish: string;
    }
    interface auditStatusUnpass {
        id: string;
        title: string;
        questionStem: string;
        question: string;
        course: string;
        knowledgePoint: string[];
        chapter: string;
        answer: string;
        difficulty: string;
        type: string;
        createTime: string;
        auditStatus: string;
        publish: string;
    }
    type TableData = auditStatusPass[] | auditStatusReviewed[] | auditStatusUnpass[];
    //分页数据
    const questionBanManagementPagination =ref();
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(100);
    // 当前表格数据
    const auditStatusPass = ref<auditStatusPass[]>([]);
    const auditStatusReviewed = ref<auditStatusReviewed[]>([]);
    const auditStatusUnpass = ref<auditStatusUnpass[]>([]);
    // 根据标签页加载数据
    const loadData = (tabName: string): void => {
        const data = {
            auditStatusPass: [
                {id:'1',title:'两数之和',questionStem: '给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。你可以按任意顺序返回答案。',question:'(1).输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。<br>(2).问题二<br>(3).问题三', 
                course:'数据结构',knowledgePoint: ['知识点一', '知识点二', '知识点三'],chapter:'章节一',answer:'A',difficulty:'简单',type:'选题题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
                // {id:'2',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'中等',type:'选择题',createTime:'2022-11-2', auditStatus: '审核未通过',publish: 'false'},
                // {id:'3',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'中等',type:'选择题',createTime:'2022-11-2', auditStatus: '待审核',publish: 'false'},
                // {id:'4',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'中等',type:'选择题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
                // {id:'5',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'中等',type:'选择题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
                // {id:'6',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'中等',type:'选择题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
                // {id:'7',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'中等',type:'选择题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
                // {id:'8',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'中等',type:'选择题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
                // {id:'9',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'中等',type:'选择题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
                // {id:'10',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'易错',type:'选择题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
                // {id:'11',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'易错',type:'选择题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
                {
                    id: '2',
                    title: '判断素数',
                    questionStem: '给定一个正整数 n，请你判断该数是否为素数。如果是素数，返回 true；否则返回 false。',
                    question: '(1). 输入：n = 7 输出：true 解释：7 是一个素数。\n<br>(2). 输入：n = 10 输出：false 解释：10 不是一个素数。\n<br>(3). 输入：n = 1 输出：false 解释：1 不是素数。',
                    course: 'C++',
                    knowledgePoint: ['循环语句', '条件判断', '函数'],
                    chapter: '章节二',
                    answer: 'B',
                    difficulty: '简单',
                    type: '选题题',
                    createTime: '2024-12-20',
                    auditStatus: '审核通过',
                    publish: 'true'
                },
                {
                    id: '3',
                    title: '冒泡排序',
                    questionStem: '实现一个冒泡排序算法，对一个整数数组从小到大排序，并输出排序后的结果。',
                    question: '(1). 输入：nums = [5, 2, 9, 1, 5, 6] 输出：[1, 2, 5, 5, 6, 9] 解释：对数组进行排序。\n<br>(2). 输入：nums = [3, 0, -2, 4, 1] 输出：[-2, 0, 1, 3, 4]。\n<br>(3). 输入：nums = [1] 输出：[1]。',
                    course: 'C++',
                    knowledgePoint: ['数组操作', '排序算法', '循环语句'],
                    chapter: '章节三',
                    answer: 'C',
                    difficulty: '中等',
                    type: '选题题',
                    createTime: '2024-12-20',
                    auditStatus: '审核通过',
                    publish: 'true'
                },
                {
                    id: '4',
                    title: '斐波那契数列',
                    questionStem: '编写一个函数，输入一个正整数 n，输出斐波那契数列的前 n 项。',
                    question: '(1). 输入：n = 5 输出：[0, 1, 1, 2, 3]。\n<br>(2). 输入：n = 1 输出：[0]。\n<br>(3). 输入：n = 8 输出：[0, 1, 1, 2, 3, 5, 8, 13]。',
                    course: 'C++',
                    knowledgePoint: ['递归', '循环语句', '函数'],
                    chapter: '章节四',
                    answer: 'A',
                    difficulty: '中等',
                    type: '选题题',
                    createTime: '2024-12-20',
                    auditStatus: '审核通过',
                    publish: 'true'
                },
                {
                    id: '5',
                    title: '二分查找',
                    questionStem: '实现一个二分查找算法，输入一个有序数组和一个目标值，返回目标值的索引（找不到则返回 -1）。',
                    question: '(1). 输入：nums = [-1, 0, 3, 5, 9, 12], target = 9 输出：4 解释：9 在数组中，索引为 4。\n<br>(2). 输入：nums = [1, 2, 3, 4, 5], target = 6 输出：-1 解释：6 不在数组中。\n<br>(3). 输入：nums = [5], target = 5 输出：0。',
                    course: 'C++',
                    knowledgePoint: ['搜索算法', '数组操作', '函数'],
                    chapter: '章节五',
                    answer: 'B',
                    difficulty: '中等',
                    type: '选题题',
                    createTime: '2024-12-20',
                    auditStatus: '审核通过',
                    publish: 'true'
                },
                {
                    id: '6',
                    title: '字符串反转',
                    questionStem: '给定一个字符串 s，请你编写一个函数实现字符串反转，并返回结果。',
                    question: '(1). 输入：s = "hello" 输出："olleh" 解释：字符串被反转。\n<br>(2). 输入：s = "C++" 输出："++C"。\n<br>(3). 输入：s = "12345" 输出："54321"。',
                    course: 'C++',
                    knowledgePoint: ['字符串操作', '循环语句', '数组'],
                    chapter: '章节六',
                    answer: 'A',
                    difficulty: '简单',
                    type: '选题题',
                    createTime: '2024-12-20',
                    auditStatus: '审核通过',
                    publish: 'true'
                },
                {
                    id: '7',
                    title: '矩阵相加',
                    questionStem: '输入两个大小相同的二维整数矩阵，求它们的和，并返回结果矩阵。',
                    question: '(1). 输入：matrix1 = [[1,2,3],[4,5,6]], matrix2 = [[7,8,9],[10,11,12]] 输出：[[8,10,12],[14,16,18]]。\n<br>(2). 输入：matrix1 = [[1]], matrix2 = [[2]] 输出：[[3]]。\n<br>(3). 输入：matrix1 = [[0,0],[0,0]], matrix2 = [[1,1],[1,1]] 输出：[[1,1],[1,1]]。',
                    course: '数据结构',
                    knowledgePoint: ['二维数组', '循环语句', '矩阵操作'],
                    chapter: '章节七',
                    answer: 'B',
                    difficulty: '中等',
                    type: '选题题',
                    createTime: '2024-12-20',
                    auditStatus: '审核通过',
                    publish: 'true'
                },
                {
                    id: '8',
                    title: '文件字符统计',
                    questionStem: '编写一个程序，读取一个文本文件，并统计其中英文字母的数量、数字的数量和其他字符的数量。',
                    question: '(1). 输入文件内容："abc123!@#" 输出：字母=3，数字=3，其他字符=3。\n<br>(2). 输入文件内容："C++ is great!" 输出：字母=10，数字=0，其他字符=4。\n<br>(3). 输入文件内容："2024!" 输出：字母=0，数字=4，其他字符=1。',
                    course: 'C++',
                    knowledgePoint: ['文件操作', '字符处理', '循环语句'],
                    chapter: '章节八',
                    answer: 'C',
                    difficulty: '中等',
                    type: '选题题',
                    createTime: '2024-12-20',
                    auditStatus: '审核通过',
                    publish: 'true'
                },
                {
                    id: '9',
                    title: '学生成绩排序',
                    questionStem: '定义一个学生结构体，包含姓名、学号和成绩。输入多个学生的信息，按成绩从高到低排序，并输出排序后的学生信息。',
                    question: '(1). 输入：学生信息 = [{"name":"Alice","id":1,"score":90},{"name":"Bob","id":2,"score":85}] 输出：[{"name":"Alice","id":1,"score":90},{"name":"Bob","id":2,"score":85}]。\n<br>(2). 输入：学生信息 = [{"name":"Tom","id":3,"score":78},{"name":"Jerry","id":4,"score":92}] 输出：[{"name":"Jerry","id":4,"score":92},{"name":"Tom","id":3,"score":78}]。\n<br>(3). 输入：学生信息 = [{"name":"Anna","id":5,"score":88}] 输出：[{"name":"Anna","id":5,"score":88}]。',
                    course: 'C++',
                    knowledgePoint: ['结构体', '排序算法', '数组操作'],
                    chapter: '章节九',
                    answer: 'A',
                    difficulty: '中等',
                    type: '选题题',
                    createTime: '2024-12-20',
                    auditStatus: '审核通过',
                    publish: 'true'
                },
                {
                    id: '10',
                    title: '判断回文数',
                    questionStem: '给定一个整数 x，如果 x 是一个回文整数，返回 true；否则，返回 false。回文整数是指正序和倒序读都是一样的整数，例如 121 是回文，但 123 不是。',
                    question: '(1). 输入：x = 121 输出：true。\n<br>(2). 输入：x = -121 输出：false 解释：从左到右读为 -121，从右到左读为 121- 。\n<br>(3). 输入：x = 10 输出：false。',
                    course: 'java',
                    knowledgePoint: ['数字操作', '条件判断', '循环语句'],
                    chapter: '章节十',
                    answer: 'B',
                    difficulty: '简单',
                    type: '选题题',
                    createTime: '2024-12-20',
                    auditStatus: '审核通过',
                    publish: 'true'
                }
            ] as auditStatusPass[],
            auditStatusReviewed: [
                {id:'1',title:'最大数',questionStem: '给定一组非负整数 nums，重新排列每个数的顺序（每个数不可拆分）使之组成一个最大的整数。注意：输出结果可能非常大，所以你需要返回一个字符串而不是整数。',
                question:'(1).输入：nums = [10,2]输出：210"<br>(2).输入：nums = [3,30,34,5,9]输出"953330"', 
                course:'数据结构',knowledgePoint:['贪心算法'],chapter:'第八章',
                answer:'    我们保持一个理想的状态：转向时，剩余的点都位于要求方向的一侧（即剩余点都符合当前这次的转向要求）。那么当前这次转向选择什么点，可以使下一次转向依旧满足这个理想的状态，从而可以不断的递归找下去。若下一次转向的要求方向是 L (R)，则这次转向的点中选择相对方向最右（最左）的点即可。如图所示，当前位于 B 点且转向方向为 R，其余点都位于  AB的右侧，其中点 C、D分别是相对方向最左和最右的点。若下一次转向方向为 L，则这次选择 D 点，可使剩余点都位于  BD的左侧；若下一次转向方向为 R，则这次选择 C 点，可使剩余点都位于  BC的右侧。',
                difficulty:'一般',type:'简答题',createTime:'2022-11-2', auditStatus: '未提交',publish: 'false'},
                {id:'2',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',
                knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'一般',type:'选择题',createTime:'2022-11-2', auditStatus: '审核未通过',publish: 'false'},
                {
                    id: '2',
                    title: '两数相加',
                    questionStem: '给定两个用链表表示的非负整数。它们的每个节点分别存储单个数字，并且每个链表的头节点为最低有效位。请你将这两个数相加，并以链表形式返回结果。',
                    question: '(1). 输入：l1 = [2,4,3], l2 = [5,6,4] 输出：[7,0,8] 解释：342 + 465 = 807。\n<br>(2). 输入：l1 = [0], l2 = [0] 输出：[0]。',
                    course: '数据结构',
                    knowledgePoint: ['链表操作'],
                    chapter: '第七章',
                    answer: '将链表节点从低到高依次相加，考虑进位，逐步构造新的链表。',
                    difficulty: '一般',
                    type: '简答题',
                    createTime: '2024-12-20',
                    auditStatus: '未提交',
                    publish: 'false'
                },
                {
                    id: '3',
                    title: '环形链表检测',
                    questionStem: '给定一个链表，判断链表中是否有环。如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。',
                    question: '(1). 输入：head = [3,2,0,-4], pos = 1 输出：true。\n<br>(2). 输入：head = [1,2], pos = -1 输出：false。',
                    course: '数据结构',
                    knowledgePoint: ['快慢指针'],
                    chapter: '第六章',
                    answer: '使用快慢指针，快指针每次走两步，慢指针每次走一步，如果存在环，快慢指针必定会相遇。',
                    difficulty: '一般',
                    type: '简答题',
                    createTime: '2024-12-20',
                    auditStatus: '未提交',
                    publish: 'false'
                },
                {
                    id: '4',
                    title: '最长公共子序列',
                    questionStem: '给定两个字符串 text1 和 text2，返回这两个字符串的最长公共子序列的长度。如果不存在公共子序列，返回 0。',
                    question: '(1). 输入：text1 = "abcde", text2 = "ace" 输出：3 解释：最长公共子序列是 "ace" ，它的长度为 3。\n<br>(2). 输入：text1 = "abc", text2 = "def" 输出：0。',
                    course: '算法设计',
                    knowledgePoint: ['动态规划'],
                    chapter: '第九章',
                    answer: '构造二维动态规划数组 dp[i][j] 表示 text1 前 i 个字符和 text2 前 j 个字符的最长公共子序列长度。',
                    difficulty: '困难',
                    type: '简答题',
                    createTime: '2024-12-20',
                    auditStatus: '未提交',
                    publish: 'false'
                },
                {
                    id: '5',
                    title: '单词搜索',
                    questionStem: '给定一个 m x n 的二维网格 board 和一个字符串单词 word。如果 word 存在于网格中，返回 true；否则，返回 false。单词必须按照字母顺序，通过相邻的单元格找到。',
                    question: '(1). 输入：board = [["A","B","C","E"],["S","F","C","S"],["A","D","E","E"]], word = "ABCCED" 输出：true。\n<br>(2). 输入：board = [["A","B","C","E"],["S","F","C","S"],["A","D","E","E"]], word = "SEE" 输出：true。',
                    course: '数据结构',
                    knowledgePoint: ['深度优先搜索'],
                    chapter: '第十章',
                    answer: '使用深度优先搜索（DFS），从每个起点开始递归搜索，标记已访问的路径避免重复访问。',
                    difficulty: '困难',
                    type: '简答题',
                    createTime: '2024-12-20',
                    auditStatus: '未提交',
                    publish: 'false'
                },
                {
                    id: '6',
                    title: '有效的括号',
                    questionStem: '给定一个只包括括号的字符串 s，判断字符串是否有效。有效字符串需满足：括号必须以正确的顺序闭合，并且每个左括号都必须有一个相同类型的右括号。',
                    question: '(1). 输入：s = "()" 输出：true。\n<br>(2). 输入：s = "([)]" 输出：false。',
                    course: '算法设计',
                    knowledgePoint: ['栈'],
                    chapter: '第五章',
                    answer: '使用栈存储左括号，遇到右括号时弹出栈顶元素匹配，如果栈为空且没有多余右括号，则有效。',
                    difficulty: '简单',
                    type: '简答题',
                    createTime: '2024-12-20',
                    auditStatus: '未提交',
                    publish: 'false'
                },
                {
                    id: '7',
                    title: '合并区间',
                    questionStem: '以二维数组 intervals 表示若干个区间的集合，请你合并所有重叠的区间，并返回一个不重叠的区间数组。',
                    question: '(1). 输入：intervals = [[1,3],[2,6],[8,10],[15,18]] 输出：[[1,6],[8,10],[15,18]]。\n<br>(2). 输入：intervals = [[1,4],[4,5]] 输出：[[1,5]]。',
                    course: '数据结构',
                    knowledgePoint: ['排序', '区间操作'],
                    chapter: '第四章',
                    answer: '按照区间起点排序，遍历区间并合并重叠部分，记录到结果数组中。',
                    difficulty: '一般',
                    type: '简答题',
                    createTime: '2024-12-20',
                    auditStatus: '未提交',
                    publish: 'false'
                },
                {
                    id: '8',
                    title: '岛屿数量',
                    questionStem: '给定一个由 "1"（陆地）和 "0"（水）组成的二维网格，计算岛屿的数量。岛屿总是被水包围，并且每座岛屿只能由水平方向和竖直方向上相邻的陆地连接而成。',
                    question: '(1). 输入：grid = [["1","1","1","1","0"],["1","1","0","1","0"],["1","1","0","0","0"],["0","0","0","0","0"]] 输出：1。\n<br>(2). 输入：grid = [["1","1","0","0","0"],["1","1","0","0","0"],["0","0","1","0","0"],["0","0","0","1","1"]] 输出：3。',
                    course: '算法设计',
                    knowledgePoint: ['深度优先搜索', '广度优先搜索'],
                    chapter: '第三章',
                    answer: '使用深度优先搜索（DFS）或广度优先搜索（BFS），遍历网格中每一个未访问的 "1" ，将整个岛屿标记为访问过，并统计岛屿数量。',
                    difficulty: '一般',
                    type: '简答题',
                    createTime: '2024-12-20',
                    auditStatus: '未提交',
                    publish: 'false'
                },
                {
                    id: '9',
                    title: '翻转二叉树',
                    questionStem: '翻转一棵二叉树，使其左右子树互换。',
                    question: '(1). 输入：root = [4,2,7,1,3,6,9] 输出：[4,7,2,9,6,3,1]。\n<br>(2). 输入：root = [1,2] 输出：[1,null,2]。',
                    course: '数据结构',
                    knowledgePoint: ['二叉树', '递归'],
                    chapter: '第二章',
                    answer: '通过递归交换每个节点的左右子树。如果节点为空则返回，终止递归。',
                    difficulty: '一般',
                    type: '简答题',
                    createTime: '2024-12-20',
                    auditStatus: '未提交',
                    publish: 'false'
                }

            ] as auditStatusReviewed[],
            auditStatusUnpass: [
                {id:'1',title:'两数之和',questionStem: '给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。你可以按任意顺序返回答案。',
                question:'(1).输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。(2).问题二(3).问题三',
                 course:'课程一',
                 knowledgePoint:['知识点一'],chapter:'章节一',answer:'我们保持一个理想的状态：转向时，剩余的点都位于要求方向的一侧（即剩余点都符合当前这次的转向要求）。那么当前这次转向选择什么点，可以使下一次转向依旧满足这个理想的状态',
                 difficulty:'一般',type:'单选题',createTime:'2022-11-2', auditStatus: '未提交',publish: 'false'},
                 {id:'2',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint: ['知识点一'],chapter:'章节一',answer:'A',difficulty:'中等',type:'选择题',createTime:'2022-11-2', auditStatus: '审核未通过',publish: 'false'},

            ] as auditStatusUnpass[],
        };
        auditStatusPass.value = data[tabName] || [];
        auditStatusReviewed.value = data['auditStatusReviewed'] || [];
        auditStatusUnpass.value = data['auditStatusUnpass'] || [];
    }
    // 初始化加载默认标签页的数据
    loadData(activeTab.value);
    // 表格数据
    // const tableData =ref([
    //     {id:'1',title:'两数之和',questionStem: '给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。你可以按任意顺序返回答案。',question:'(1).输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。(2).问题二(3).问题三', course:'课程一',knowledgePoint:'知识一',chapter:'章节一',answer:'A',difficulty:'一般',type:'单选题',createTime:'2022-11-2', auditStatus: '未提交',publish: 'false'},
    //     {id:'2',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint:'知识一',chapter:'章节一',answer:'A',difficulty:'一般',type:'单选题',createTime:'2022-11-2', auditStatus: '审核未通过',publish: 'false'},
    //     {id:'3',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint:'知识一',chapter:'章节一',answer:'A',difficulty:'一般',type:'单选题',createTime:'2022-11-2', auditStatus: '待审核',publish: 'false'},
    //     {id:'4',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint:'知识一',chapter:'章节一',answer:'A',difficulty:'一般',type:'单选题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
    //     {id:'5',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint:'知识一',chapter:'章节一',answer:'A',difficulty:'一般',type:'单选题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
    //     {id:'6',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint:'知识一',chapter:'章节一',answer:'A',difficulty:'一般',type:'单选题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
    //     {id:'7',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint:'知识一',chapter:'章节一',answer:'A',difficulty:'一般',type:'单选题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
    //     {id:'8',title:'题目一',questionStem: '题目11111111111111111',question:'(1).问题一(2).问题二(3).问题三',course:'课程一',knowledgePoint:'知识一',chapter:'章节一',answer:'A',difficulty:'一般',type:'单选题',createTime:'2022-11-2', auditStatus: '审核通过',publish: 'true'},
    // ]);
    
    // 分页数据
    // 总记录数据
    // const total = ref(0);
    // 当前页码
    const pageData = reactive({
        pageNum: 1,
        pageSize: 10,
    })
    // 对话框标题
    const selectTitle = ref()
    // 对话框是否可见
    const dialogVisible = ref(false)
    // form提交表单的数据
    const ruleForm = reactive({
        title: '',
        course: '',
        knowledgePoint: '',
        chapter: '',
        answer: '',
        difficulty: '',
        type: '',
        createTime:'',
        auditStatus:'',
        publish:''
    })
    // 表单校验规则
    const rules = reactive<FormRules>({
        title: [
            { required: true, message: '请输入题目', trigger: 'blur' }
        ],
        course: [
            { required: true, message: '请选择课程', trigger: 'change' }
        ],
        knowledgePoint: [
            { required: true, message: '请选择知识点', trigger: 'change' }
        ],
        chapter: []
    })
    // 表单实例
    const ruleFormRef = ref<FormInstance>()

// 方法
    //获取列表数据
    const getList = async () => {
      try {
        const response = await fetch(
          `/api/data?pageNum=${pageData.pageNum}&pageSize=${pageData.pageSize}`
        );
        const result = await response.json();
        auditStatusPass.value = result.data; // 设置审核通过的表格数据
        auditStatusReviewed.value = result.data; // 设置待审核的表格数据
        auditStatusUnpass.value = result.data; // 设置驳回的表格数据
        // 设置总记录数
        // total.value = result.total; 
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    }
    // 获取课程数据
    const handlCourse = async () => {
        try {
            // 模拟从后端接口获取数据
            const response = await fetch('/api/courses'); // 替换为实际后端接口
            const data = await response.json();
            courses.value = data; // 将获取到的课程数据赋值给 courses
        } catch (error) {
            console.error('获取课程失败:', error);
        }
        }

    // 根据 difficulty 返回不同类型的标签
    const getTagType = (difficulty: string): 'success' | 'primary' | 'danger' | 'warning' => {
      switch (difficulty) {
        case '简单':
          return 'success';  // green tag
        case '中等':
          return 'primary';     // blue tag
        case '易错':
          return 'danger';   // red tag
        default:
          return 'warning';  // default tag
      }
    }
    // 提交表单
    const submitForm = (formEl: any) => {
        if (!formEl) return;
        formEl.validate((valid: any) => {
            // if(){

            // }else{
            // }
        });
    }
    // 重置表单
    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
        dialogVisible.value = false
    }
    
    // 打开对话框
    const handleDialog = () => {
        dialogVisible.value = true
    }
    // 关闭对话框
    const handleClose = () => {
        console.log('关闭对话框');
        dialogVisible.value = false
    }
    // 查看信息
    const handleView = (index: number, row: any) => {
        console.log(index, row);
    }
    // 审核
    const handleAudit = (index: number, row: any) => {
        console.log(index, row);
    }
    // 新增
    const handleAdd = () => {
        console.log('新增');
        selectTitle.value='新增题库';
        resetForm(ruleFormRef.value);
        handleDialog()
    }
    // 删除
    const handleDelete = (index: number, row: any) => {
        console.log(index, row);
    }
    // 编辑
    const handleEdit = (index: number, row: any) => {
        console.log(index, row);
    }
    // 批量删除
    const handleDeletes = () => {
        console.log('批量删除');
    }
    // 搜索
    const handleSearch = () => {
        console.log('搜索');
        console.log(search);
    }
    // 重置
    const handleReset = () => {
        console.log('重置');
    }
// 计算属性
</script>

<style scoped>
    /* 容器样式 */
    .Management{
        overflow: visible; /* 保证子元素悬浮效果不受限制 */
        width: var(--width);
        height: 100%;
        margin-top: 50px;
    }
    /* 标签样式 */
    span{
        font-size: 18px;
        margin-right: 10px;
    } 
    /* 表单容器 */
    .form-container {
        margin-top: 20px;
        margin-bottom: 50px;
    }
    /* 表单样式 */
    .form-row {
        margin-bottom: 20px;
    }
    /* 表单列样式 */
    .form-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* 表单项样式 */
    .form-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    /* 标签样式 */
    .form-item span {
        font-size: 18px;
        margin-right: 10px;
    }
    /* 占位符样式 */
    .placeholder {
        display: inline-block;
        width: 5px; /* 可以根据需要调整宽度 */
        height: 10px; /* 可以根据需要调整高度 */
        background-color: transparent; /* 可以根据需要调整背景颜色 */
        border: 1px  #ccc; /* 可以根据需要调整边框颜色和样式 */
        margin: 0 2px; /* 可以根据需要调整间距 */
    }
    /* 文本溢出显示省略号 */
    .text-ellipsis {
        white-space: nowrap; /* 规定文本不能换行 */
        overflow: hidden;/* 隐藏超出内容 */
        text-overflow: ellipsis;/* 溢出部分用省略号表示，依赖块级元素 */
        font-size: 15px;
        width: 100%; /* 确保宽度受父元素限制 */
        /* 必须是块级元素 */
        display: inline-block; 
        width: 100%;
    }
    /* 分页盒子 */
    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
     /* 保留空格和换行符 */
    .answer-content {
    white-space: pre-wrap;
    }
</style>